

<script language="javascript" type="text/javascript">

	$(function(){
	    $('#uploadButonBox').click(function(e){
	        e.preventDefault();
	        $('#inputFile').click();
	    });
	});

	function uploadFile()
	{
		cleanErrors();
		
		if(!checkFile())
			return;
		
		$('#divFileUploaded').html('');
	 
		var data = new FormData();
		data.append("file", document.getElementById('inputFile').files[0]);
	 
		$.ajax({
			url: '/GALS/Upload/Image',
			data: data,
			dataType: 'text',
			processData: false,
			contentType: false,
			type: 'POST',
			success: function(response){
				var file = jQuery.parseJSON(response);
				if(file.error != '') {
					addError(file.error);
					return;
				}
				else {
					$('#divFileUploaded').html(
						'<img id="fileUploaded" src="'+ file.url + '" fileName="' + file.fileName + '" fileId="' + file.fileId + '" style="max-height: 500px; max-width: 500px;"/>'		
					);
					$('#cropButtonBox').show();
					$('#fileUploaded').Jcrop({
			            aspectRatio: 1,
			            onSelect: storeCoords
			        });
					cleanCoords();
				}
			}
		});
	}
	
	function checkFile() 
	{
		var file = document.getElementById('inputFile').files[0];
		
		if(file == undefined)
			return false;
		
		var fileName = file.name.toLowerCase();
		
		if(!(fileName.match(".*\.jpg") || fileName.match(".*\.jpeg") || fileName.match(".*\.png"))) {
			addError('Seleccione una imagen de tipo jpg, jpeg o png, por favor.');
			return false;
		}
		
		return true;
	}

	function storeCoords(c) 
	{
		$('#x').val(c.x);
		$('#y').val(c.y); 
		$('#w').val(c.w);
		$('#h').val(c.h);
	}
	
	function checkCoords()
	{
		if ($('#w').val() == '') {
			addError('Seleccione una region de corte, por favor.');
			return false;
		}
		return true;
	}
	
	function cleanCoords() 
	{
		$('#x').val('');
		$('#y').val(''); 
		$('#w').val('');
		$('#h').val('');
	}
	
	function cleanErrors() 
	{
		$('#file_error').css('display', 'none');
		$('.file_error').find('ul').html('');
	}
	
	function addError(error) 
	{
		$('#file_error').css('display', '');
		$('.file_error').find('ul').append('<li>' + error + '</li>');
	}

	function cropPicture()
	{
		cleanErrors();
		
		if(!checkCoords())
			return;
		
	    $.ajax({
			url: "/GALS/Upload/Crop",
			type: "POST", 
			data: {
				x : $('#x').val(),
				y : $('#y').val(),
				w : $('#w').val(),
				h : $('#h').val(),
				imageId : $('#fileUploaded').attr('fileId'),
				imageName : $('#fileUploaded').attr('fileName'),
				imageWidth : $('#fileUploaded').width(),
				imagenHeight : $('#fileUploaded').height()
			},
			success: function(response){
				var file = jQuery.parseJSON(response);
				if(file.error != '') {
					addError(file.error);
					return;
				}
				else {
					actualizarImagen(file);
					cerrarCropBox();
				}
			}
	    });
	}
	
	function cerrarCropBox() {
		$("#divBoxUpload").trigger('close');
        $('#divFileUploaded').html('');
        $('#cropButtonBox').hide();
        cleanCoords();
        cleanErrors();
	}
	
	$(function () {
		$('#cancelButtonBox').click(function (e) {
			cerrarCropBox();
	    });
	});
</script>

<div id="divBoxUpload" style="display: none">
	
	<div class="form form_imagen">
	
		<div id="file_error" style="display: none;">
			<div class="file_error">
				<table border="0" style="width: 100%;">			
					<tr>
						<td width="15%"></td>
						<td width="85%"></td>
					</tr>
					<tr>
						<td class="image_error">
							<img 
								alt="img"
								src="${pageContext.request.servletContext.contextPath}/GalsFile/error.png" 
							/>
						</td>
						<td class="description_error">
							<ul></ul>
						</td>
					</tr>
				</table>
			</div>
			<br />
		</div>
	
		<table border="0" style="width:500px; margin: 0 auto;">
			<tr>
				<td id="tdFileUploaded" colspan="2">
					<div id="divFileUploaded"></div>
				</td>
			</tr>
			<tr style="height: 60px; vertical-align: bottom;">
				<td>
					<div>
						<input 
							id="uploadButonBox" 
							type="button" 
							class="button"
							value="Seleccionar Archivo"			
						/>
						<input id="inputFile" type="file" onchange="uploadFile()" style="display:none;"></input>
					</div>
				</td>
				<td>
					<div>
			            <input 
			            	id="cancelButtonBox"
			            	type="button" 
			            	class="button" 
			            	onclick="" 
			            	value="<fmt:message key="CANCELAR"/>" 
			            	style="float: right;"
			            /> 
			           	<input 
			           		id="cropButtonBox" 
			           		type="button" 
			           		class="button" 
			           		onclick="cropPicture()" 
			           		value="<fmt:message key="ACEPTAR"/>" 
			           		style="float: right; display:none;" 
			           	/> 
			        </div>
				</td>
			</tr>
		</table>
		
		<input type="hidden" id="x"  name="x" />
		<input type="hidden" id="y"  name="y" />
		<input type="hidden" id="w"  name="w" />
		<input type="hidden" id="h"  name="h" />
		
	</div>
</div>
